<template>
  <div style="background-color: #fff">
    <van-row v-show="fail_reason && workers_userId == userId && status == 2">
      <van-col
        style="background-color: #fff; color: red; padding: 0 16px"
        span="24"
        >审核不通过原因：{{ fail_reason }}</van-col
      >
    </van-row>
    <!-- 默认图片选择弹出层 -->
    <van-popup
      position="bottom"
      v-model="show_default_img"
      click-overlay="hideDefaultImg"
      style="height: auto%; padding: 10px 16px"
    >
      <div style="width: 100%; padding-bottom: 75%">
        <div
          class="deault_images_one"
          :style="{ backgroundImage: 'url(' + chosed_default_img + ')' }"
        >
          <span class="confirm_button" @click="confirmDefaultImg"
            >确定选择</span
          >
        </div>
        <div class="deault_images_two">
          <div
            v-for="(defaultImg, index) in defaultImgList.slice(0, 4)"
            :key="index"
            :style="{ backgroundImage: 'url(' + defaultImg.itemValue + ')' }"
            :class="'deault_images_' + index"
            @click="changeDefaultImg(defaultImg.itemValue)"
          ></div>
        </div>
        <div
          v-for="(defaultImg, index) in defaultImgList.slice(4, 8)"
          :key="index"
          :style="{ backgroundImage: 'url(' + defaultImg.itemValue + ')' }"
          class="deault_images_others"
          @click="changeDefaultImg(defaultImg.itemValue)"
        ></div>
      </div>
    </van-popup>
    <!-- 选择默认图片 -->
    <!-- <van-row>
      <van-col
        span="24"
        style="background-color:#BBBBBB;text-align:center;padding:20px 0;"
      >
        <div  class="img_url van-uploader">
          <div class="van-uploader__wrapper">
            <img
              :src="img_url"
              width="80px"
              style="position:absolute;z-index:20;"
            />
            <div class="van-uploader__input-wrapper">
              <span
                style="display:inline-block;width:80px;height:80px;border:1px solid #fff;"
              >
                <img
                  :src="camera_icon"
                  width="36px"
                  style="margin:22px 22px;"
                />
              </span>
              <input
                @change="changeInputFile"
                type="file"
                accept="image/*"
                style="z-index:2002"
                class="van-uploader__input"
              />
            </div>
          </div>
        </div>
        <br />
        <span
          @click="showDefaultImg"
          style="display:inline-block;width:80px;height:24px;line-height:24px;border:1px solid #fff;font-size:10px;color:#fff;"
          >上传头像</span
        >
      </van-col>
    </van-row> -->
    <!-- 信息录入 -->
    <van-cell-group>
      <van-field
        label="队伍名称:"
        placeholder="请输入标题(3~14个字)"
        :maxlength="14"
        v-model="title"
        required
      />

      <van-field label="人员规模：">
        <van-stepper slot="input" v-model="staff" step="1" />
      </van-field>
      <van-field label="所在地区：" @click="showPopup" required>
        <span slot="input">{{ address == '' ? '请选择地区' : address }}</span>
      </van-field>
      <van-field
        label="详细地址："
        placeholder="请输入详细地址"
        v-model="address_detail"
      />
      <van-field
        class="work_type"
        required
        @click="redirectTo"
        label="选择工种："
      >
        <span slot="input" v-if="getworld.length == 0">
          <span style="">请选择工种 </span>
        </span>
        <span slot="input" v-else>
          <span
            style="
              color: white;
              background: #ffaa00;
              padding: 2px;
              border-radius: 4px;
            "
            v-for="(item, index) in getworld"
            :key="index"
            :style="index != 0 ? 'margin-left:5px;' : null"
            @click="deletab(index, item)"
            >{{ item + 'X' }}
          </span>
        </span>
        <!-- <v-select
          slot="input"
          style="width: 200px"
          :multiple="true"
          :selectable="selectWkType"
          :searchable="false"
          :close-on-select="false"
          :options-label="'label'"
          :options-value="'value'"
          v-model="wkTypeSelected"
          :options="workType"
          placeholder="可多选二种"
        ></v-select> -->
      </van-field>
      <!-- <van-field
        class="serveDes"
        label="服务范围："
        v-model="serve_des"
        autosize
        type="textarea"
        show-word-limit
      /> -->
      <van-field
        v-if="userLevel == 2"
        label="客户电话："
        placeholder="请输入手机号"
        type="tel"
        v-model="tel"
      />
      <!-- <van-field label="详情介绍：" disabled /> -->
      <div
        style="
          margin: 10px 16px;
          border: 1px solid #ebedf0;
          background-color: #fff;
          margin-bottom: 20px;
        "
      >
        <van-field
          v-model="detail"
          rows="2"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="详情介绍:
  请输入简介详情(人员技术水平、年龄、施工案例、结算方式等)
  提醒:手机号码等其他联系方式无法展现"
          show-word-limit
        />
      </div>
      <div style="">
        <p style="font-size: 12px; color: red; margin-left: 16px">
         <span style="color:red">*</span> 请从手机相册选择图片上传，上传图片排名更靠前
        </p>
        <van-uploader
          :max-count="1"
          class="upimgs"
          upload-text="施工图片"
          v-model="fileList"
          style="padding: 10px 16px"
          v-show="show_upload"
          :before-read="beforeRead"
          :after-read="afterRead"
          :before-delete="beforeDelete"
        />
      </div>

      <!-- <span style="display: inline-block; width: 100%; text-align: center">
        <van-button style="border: 1px solid #ee3f00" @click="uploadImg">
          <font color="#EE3F00">点击上传图片</font>
        </van-button>
      </span> -->
      <!-- <span style="
          display: inline-block;
          width: 100%;
          text-align: left;
          font-size: 13px;
          color: #95969f;
          margin-top: 10px;
          margin-bottom: 20px;
          padding: 0 16px;
        ">温馨提示：上传更多施工图片能让您的信息更靠前哦！</span> -->
      <!--        <time-ino type="teams"/>-->
      <div style="padding: 0 16px">
        <van-button
          style="
            background-color: #ee3f00;
            width: 100%;
            color: #fff;
            font-size: 18px;
          "
          @click="savePublish"
          >确认发布</van-button
        >
      </div>
      <van-popup v-model="show" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="addConfirm"
          @cancel="hidePopup"
          :value="addrCode"
        />
      </van-popup>
    </van-cell-group>
    <my-cropper
      v-show="show_cropper"
      :cropperShow="show_cropper"
      :imgUrl="cropper_imgUrl"
      :originfilename="cropper_originName"
      @cropperChange="cropChange"
    />
    <div
      @click="disappear"
      style="
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 11;
        top: 0;
        display: none;
        background: rgba(0, 0, 0, 0.5);
      "
      ref="bcwosl"
    ></div>
    <div
      style="
        height: 40%;
        width: 100%;
        position: absolute;
        z-index: 12;
        bottom: -40%;
        display: none;
        background: #fff;
      "
      ref="wosl"
    >
      <div style="width: 100%; display: flex; justify-content: space-around">
        <p
          @click="disappear"
          style="width: 59%; padding-left: 4%; color: #969799"
        >
          取消
        </p>
        <p @click="disappear" style="width: 10%; color: #576b95">确认</p>
      </div>

      <ul style="width: 92%; flex-wrap: wrap; margin: auto">
        <li
          v-for="(vlu, index) in tabvlue"
          ref="styab"
          :key="vlu.id"
          style="width: 22%; float: left; border-radius: 4px; margin-top: 2px"
          :style="index % 4 != 0 ? 'margin-left: 4%' : null"
          @click="ontap(index, vlu.tab, vlu.id)"
        >
          <p style="width: 100%; text-align: center; margin: 12px 0">
            <span
              style="
                padding: 0px 2px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
              "
              class="tanspan"
              >{{ vlu.tab }}</span
            >
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import timeIno from '@/views/info/timeIno';
// import html2canvas from 'html2canvas';
import areaList from '@/views/user/module-address-edit/area_all.json';
import {
  Image,
  Row,
  Col,
  Field,
  Button,
  Popup,
  Area,
  Stepper,
  Uploader,
  Toast,
  Dialog,
} from 'vant';
import {
  storageUpload,
  teamSave,
  dicItems,
  teamDetail,
  teamUpdate,
  authInfo,
} from '@/api/api';
import { setLocalStorage } from '@/utils/local-storage';
import camera_icon from '@/assets/images/icons/camera_icon.png';
import myCropper from '@/views/common/my-cropper';
export default {
  name: 'employ-workers-publish',
  props: {
    teamsId: {
      type: [String, Number],
      default: -1,
    },
  },
  data() {
    return {
      userLevel: 0,
      getworld: [],
      tabvlue: [
        { tab: '腻子施工', value: '建筑内外墙施工', id: 0 },
        { tab: '涂料施工', value: '钢结构建筑工地', id: 2 },
        { tab: '防水施工', value: '建筑内外墙施工', id: 5 },
        { tab: '真石漆施工', value: '建筑内外墙施工', id: 7 },
        { tab: '粉刷石膏', value: '建筑内外墙施工', id: 14 },
        { tab: '水泥砂浆', value: '家装工程防水补漏', id: 1 },
        { tab: '防火施工', value: '防腐保温工程施工', id: 3 },
        { tab: '防腐施工', value: '建筑内外墙施工', id: 4 },
        { tab: '划线施工', value: '建筑内外墙施工', id: 8 },
        { tab: '地坪施工', value: '建筑内外墙施工', id: 12 },
        { tab: '其他工种', value: '建筑内外墙施工', id: 13 },
      ],
      tel: '',
      show_default_img: false,
      camera_icon: camera_icon,
      title: '',
      workType: [],
      show: false,
      show_upload: true,
      staff: 0,
      address: '',
      address_detail: '',
      addrCode: '321311',
      areaList: areaList,
      serve_des: '',
      detail: '',
      wkTypeSelected: [],
      defaultImgList: [],
      fileList: [],
      img_url: '',
      province_code: '',
      city_code: '',
      district_code: '',
      city: '',
      district: '',
      province: '',
      wkType: [],
      images: [],
      defaultImgId: 'PROJECT.DEFAULT.IMG',
      chosed_default_img: '',
      mobile: '',
      wkTypeId: 'INFO.WORK.TYPE',
      userId: '',
      fail_reason: '',
      workers_userId: '',
      status: -1,
      cropper_imgUrl: '',
      cropper_originName: '',
      show_cropper: false,
    };
  },
  created() {
    authInfo().then((res) => {
      this.userId = res.data.data.userId;
      this.mobile = res.data.data.mobile || '';
      this.userStatus = res.data.data.status;
      this.isAttention = res.data.data.isAttention;
      this.directorId = res.data.data.directorId;
      this.userLevel = res.data.data.userLevel;
      this.memberLevel = res.data.data.memberLevel;
      this.powerPRSWLevle = res.data.data.powerPRSWLevle || 0;
    });
    this.initWkType();

    this.getDefaultImgs();
    if (this.teamsId != -1) {
      this.init();
    }
  },
  methods: {
    // 取消按钮
    disappear() {
      let bcwosl = this.$refs.bcwosl;
      let wosl = this.$refs.wosl;
      wosl.classList.remove('work_selection');
      wosl.className = 'work_cancel';
      wosl.style.transform = '';
      setTimeout(() => {
        wosl.style.display = 'none';
        bcwosl.style.display = 'none';
        this.workbol = true;
      }, 200);
    },
    // 删除
    deletab(index, item) {
      let styab = this.$refs.styab;
      styab.forEach((e) => {
        if (e.childNodes[0].innerText == item) {
          e.classList.remove('getbackr');
        }
      });

      this.getworld.splice(index, 1);
      this.wkType.splice(index, 1);

      this.worklength = this.getworld.length;
    },
    // tab按钮
    ontap(index, tab, id) {
      let styab = this.$refs.styab;
      let pan = true;
      this.getworld.forEach((e) => {
        if (e == tab) {
          pan = false;
        }
      });
      if (!pan) {
        Toast('请勿重复选择');
        return;
      }
      if (this.worklength == 2 || this.worklength >= 2) {
        styab.forEach((e) => {
          e.style.color = 'rgb(150, 151, 153)';
        });
        Toast('最多只能选择2个');
        return;
      } else {
        styab.forEach((e) => {
          e.style.color = '';
        });
      }
      this.wkType.push(Number(id));
      this.getworld.push(this.tabvlue[index].tab);
      this.worklength = this.getworld.length;
      styab[index].className = 'getbackr';
      this.active = id;
    },
    // 点击出现
    redirectTo() {
      let wosl = this.$refs.wosl;
      let bcwosl = this.$refs.bcwosl;
      let styab = this.$refs.styab;
      if (this.getworld.length == 2) {
        styab.forEach((e) => {
          e.style.color = 'rgb(150, 151, 153)';
        });
        Toast('最多只能选择2个');
        return;
      } else {
        styab.forEach((e) => {
          e.style.color = '';
        });
      }
      if (this.workbol) {
        wosl.classList.remove('work_cancel');
        wosl.className = 'work_selection';
        wosl.style.display = '';
        bcwosl.style.display = '';
        setTimeout(() => {
          wosl.style.transform = `translateY(${-87}%)`;
        }, 200);
        this.workbol = false;
        return;
      } else if (!this.workbol) {
        wosl.classList.remove('work_selection');
        wosl.className = 'work_cancel';
        wosl.style.transform = '';
        setTimeout(() => {
          wosl.style.display = 'none';
        }, 200);
        this.workbol = true;
        return;
      }
    },

    initWkType() {
      dicItems({
        groupId: this.wkTypeId,
      })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              label: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.workType.push(opiton);
          }
        })
        .catch(() => {});
    },
    init() {
      teamDetail({
        teamsId: this.teamsId,
      })
        .then((res) => {
          this.title = res.data.data.title;
          this.province = res.data.data.province;
          this.city = res.data.data.city;
          this.county = res.data.data.county;
          this.district_code = res.data.data.areaCode;
          this.addrCode = res.data.data.areaCode;
          this.address_detail = res.data.data.addressDetail;
          this.staff = res.data.data.staff;
          this.detail = res.data.data.detail;
          this.serve_des = res.data.data.serveDes;
          this.img_url = res.data.data.imgUrl;
          // this.fileList.push(this.img_url);
          this.images = res.data.data.images;
          this.wkTypes = res.data.data.workType;
          this.tel = res.data.data.tel;
          this.fail_reason = res.data.data.failReason;
          this.workers_userId = res.data.data.userId;
          this.status = res.data.data.status;
          this.initImgs();
          this.initwkTypeSelected();
        })
        .catch((e) => {});
    },
    getAddressByDistrictCode(district_code) {
      if (
        district_code == undefined ||
        district_code == null ||
        district_code == ''
      ) {
        return '地区未知';
      }
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return province_name + city_name + district_name;
    },
    initImgs() {
      for (let i in this.images) {
        let file = {
          url: this.images[i],
        };
        this.fileList.push(file);
        this.show_upload = true;
      }
    },
    initwkTypeSelected() {
      for (let i in this.wkTypes) {
        // this.wkTypeSelected.push(this.workType[this.wkTypes[i]]);
      }
    },
    convertImgToBase64(imageFile, callback, errorCallback) {
      try {
        let reader = new FileReader();
        reader.readAsDataURL(imageFile);
        reader.onload = function (e) {
          if (callback) {
            let base64Str = e.target.result;
            callback(base64Str);
          }
        };
      } catch (error) {
        console.error(error);
        if (errorCallback) {
          errorCallback(error);
        }
      }
    },
    changeInputFile(event) {
      var files = event.target.files;
      if (!files.length) {
        return;
      }
      files = files.length === 1 ? files[0] : [].slice.call(files);
      if (files) {
        this.convertImgToBase64(files, (base64Str) =>
          this.convertCb(base64Str)
        );
        this.cropper_originName = files.name;
      }
    },
    convertCb(base64) {
      this.cropper_imgUrl = base64;
      this.show_cropper = true;
    },
    cropChange(data) {
      let that = this;
      if (data.imgUrl == null) {
        that.show_cropper = false;
      } else {
        this.img_url = data.imgUrl;
        that.show_cropper = false;
      }
    },
    getDefaultImgs() {
      dicItems({
        groupId: this.defaultImgId,
      })
        .then((res) => {
          this.defaultImgList = res.data.data.list;
          this.chosed_default_img = this.defaultImgList[0].itemValue;
        })
        .catch(() => {});
    },
    changeDefaultImg(imgUrl) {
      this.chosed_default_img = imgUrl;
    },
    confirmDefaultImg() {
      this.img_url = this.chosed_default_img;
      this.show_default_img = false;
    },
    showDefaultImg() {
      this.show_default_img = true;
    },
    selectWkType(option) {
      // 修改只能选择三个
      //最多只能选五个
      if (this.wkTypeSelected.length >= 2) {
        Toast('最多只能选择2个');
        return false;
      } else {
        return true;
      }
      return true;
    },
    addConfirm(e) {
      this.show = false;
      this.province_code = e[0].code;
      this.city_code = e[1].code;
      this.district_code = e[2].code;
      this.province = e[0].name;
      this.city = e[1].name;
      this.district = e[2].name;
      this.address = this.province + this.city + this.district;
      if (this.province_code == '100000') {
        this.address = this.province;
      }
    },
    showPopup() {
      this.show = true;
    },
    hidePopup() {
      this.show = false;
    },
    uploadImg() {
      if (this.fileList.length > 1) return Toast('请上传2张以内的图片');
      this.show_upload = true;
      document.querySelector('.van-uploader__input').click();
    },
    beforeRead(file) {
      //上传之前校验
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        Toast('只允许上传jpg/png格式的图片！');
        return false;
      }
      if (file.size >= 5242880) {
        Toast('只允许上传小于5MB的图片！');
        return false;
      }
      return true;
    },
    async afterRead(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.images.push(res.data.data.url);
          })
          .catch(() => {
            file.status = 'failed';
            file.message = '上传失败';
          });
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            storageUpload(rst.formData)
              .then((res) => {
                that.images.push(res.data.data.url);
              })
              .catch(() => {
                file.status = 'failed';
                file.message = '上传失败';
              });
          })
          .catch(function (error) {
            file.status = 'failed';
            file.message = '压缩失败';
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    beforeDelete(file, detail) {
      this.images.splice(detail.index, 1);
      return true;
    },
    getWkType() {
      // this.wkType = [];
      for (let i = 0; i < this.wkTypeSelected.length; i++) {
        // this.wkType.push(this.wkTypeSelected[i].value);
      }
    },
    validate() {
      if (this.title.length < 3 || this.title.length > 20) {
        Toast('请输入标题(3~20个字)！');
        return false;
      }
      if (this.district_code == '') {
        Toast('请选择地区！');
        return false;
      }
      if (this.wkType.length <= 0) {
        Toast('请选择工种类型！');

        return false;
      }
      if (this.userLevel == 2) {
        if (!this.verifyTel(this.tel)) {
          Toast('请输入正确的客户电话！');
          return false;
        }
      }
      return true;
    },

    verifyTel(tel) {
      return tel.length === 11;
    },
    savePublish() {
      //正则验证 begin
      let val = this.detail.replace(/\s*/g, '');
      let reg_telephone_CN =
        /['零',0]['零',0,'一',1,'①','壹','二',2,'②','贰','三',3,'③','叁','四',4,'④','肆','五',5,'⑤','伍','六',6,'⑥','陆','七',7,'⑦','柒','八',8,'⑧','捌','九',9,'⑨',玖]{2,3}-?['零',0,'一',1,'①','壹','二',2,'②','贰','三',3,'③','叁','四',4,'④','肆','五',5,'⑤','伍','六',6,'⑥','陆','七',7,'⑦','柒','八',8,'⑧','捌','九',9,'⑨',玖]{6,}/g;
      let reg_mobile_CN =
        /['一',1,'①','壹']['零',0,'一',1,'①','壹','二',2,'②','贰','三',3,'③','叁','四',4,'④','肆','五',5,'⑤','伍','六',6,'⑥','陆','七',7,'⑦','柒','八',8,'⑧','捌','九',9,'⑨',玖]{10}/g;
      let reg_keywords = /联系方式|电话号码/g;
      if (reg_telephone_CN.test(val)) {
        Dialog.alert({
          title: '发布失败',
          message: '详情介绍 中禁止填写电话号码',
        }).then(() => {
          // on close
          return false;
        });
        return false;
      } else if (reg_mobile_CN.test(val)) {
        Dialog.alert({
          title: '发布失败',
          message: '详情介绍 中禁止填写手机号码',
        }).then(() => {
          // on close
          return false;
        });
        return false;
      } else if (reg_keywords.test(val)) {
        Dialog.alert({
          title: '发布失败',
          message: '详情介绍 中有不被允许的关键字',
        }).then(() => {
          // on close
          return false;
        });
        return false;
      }
      //正则验证 end
      if (!this.validate()) {
        return false;
      }
      this.getWkType();
      this.tel = this.tel.replace(/\s*/g, '');
      if (this.tel != null && this.tel.length == 11) {
        this.mobile = this.tel;
      }
      /*if (this.fileList == '') {
        Dialog.confirm({
          title: '提示',
          message: '信息审核1-2天，是否上传信息？',
          confirmButtonText: '是',
          cancelButtonText: '否',
        })
          .then(() => {
            // on confirm
            this.publishWorkers();
          })
          .catch(() => {
            // on cancel
          });
        return;
      }*/
      this.publishWorkers();
    },
    publishWorkers() {
      // console.log(this.wkType, '类型');
      if (this.teamsId != -1) {
        teamUpdate({
          id: this.teamsId,
          title: this.title,
          staff: this.staff,
          workType: this.wkType,
          serveDes: this.serve_des,
          detail: this.detail,
          areaCode: this.district_code,
          province: this.province,
          city: this.city,
          county: this.district,
          addressDetail: this.address_detail,
          images: this.images,
          imgUrl: this.images[0],
          tel: this.mobile,
          status: 1,
        })
          .then((res) => {
            Toast('发布成功，请等待审核！');
            this.$router.go(-1);
          })
          .catch(() => {
            Toast('发布失败，请联系管理员！');
          });
      } else {
        teamSave({
          title: this.title,
          staff: this.staff,
          workType: this.wkType,
          serveDes: this.serve_des,
          detail: this.detail,
          areaCode: this.district_code,
          province: this.province,
          city: this.city,
          county: this.district,
          addressDetail: this.address_detail,
          images: this.images,
          imgUrl: this.images[0],
          tel: this.mobile,
        })
          .then((res) => {
            Toast('发布成功，请等待审核！');
            this.$router.push({
              path: '/info/my-workers?userId=' + this.userId,
            });
          })
          .catch(() => {
            Toast('发布失败，请联系管理员！');
          });
      }
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Toast.name]: Toast,
    [Stepper.name]: Stepper,
    [myCropper.name]: myCropper,
    [Dialog.Component.name]: Dialog.Component,
    timeIno,
  },
};
</script>
<style lang="scss" scoped>
/deep/.van-field__label {
  width: 27%;
  text-align: center;
}

// .van-cell {
//   font-size: 2vh;
// }
/deep/ .vs__dropdown-toggle {
  border-radius: 0;
}
.getbackr {
  color: #fff;
  background: rgb(3, 151, 251);
  .tanspan {
    font-weight: bold;
  }
  // .valuespan {
  //   font-size: 0.52rem;
  // }
}
.pubakr {
  // background: #ededed;
  .tanspan {
    font-size: 0.7rem;
  }
  // .valuespan {
  //   font-size: 0.5rem;
  // }
}
.work_selection {
  transition-duration: 0.3s;
  // transform: translateY(-87%);
}
.work_cancel {
  transition-duration: 0.2s;
  transform: translateY(2%);
}
.van-ellipsis {
  font-size: 14px;
}
/deep/.vs__dropdown-toggle {
  border: none !important;
}
.chose_default_button {
  display: inline-block;
  width: 80px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #fff;
  font-size: 10px;
  color: #fff;
}

.deault_images_one {
  position: relative;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 99% 99%;
  -moz-background-size: 99% 99%;
  float: left;
  border-radius: 18px 18px 18px 18px;
}

.deault_images_two {
  position: relative;
  width: 50%;
  float: left;
  padding-bottom: 50%;
  border: 1px solid #fff;
}

.deault_images_0 {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}

.deault_images_1 {
  position: absolute;
  top: 0;
  left: 25%;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}

.deault_images_2 {
  position: absolute;
  top: 25%;
  left: 0;
  margin-top: 25%;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}

.deault_images_3 {
  position: absolute;
  top: 25%;
  left: 25%;
  margin-left: 25%;
  margin-top: 25%;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}

.confirm_button {
  display: inline-block;
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #fff;
}

.deault_images_others {
  text-align: center;
  width: 25%;
  padding-bottom: 25%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}

.img_url /deep/ .van-uploader__preview {
  margin: 0 0 8px 0;
}

.img_url /deep/ .van-uploader__preview-delete {
  line-height: 13px;
}

.serveDes /deep/ .van-field__control {
  border: 1px solid #ebedf0;
  -webkit-appearance: none;
}

.view-router {
  padding-bottom: 20px;
}

.work_type {
  overflow: visible;
}

.work_type /deep/ .van-cell__value {
  overflow: visible;
}

/deep/ .vs__selected {
  background-color: #ee3f00;
  color: #fff;
  border: 0;
}

/deep/ .vs__deselect {
  fill: #fff;
}

/deep/.vs__open-indicator {
  transform: scale(0.8);
}

/deep/.vs__dropdown-toggle {
  min-width: 100px;
}
</style>
